<template>
    <div>
        <!-- 修改登录密码 -->
        <view class="mt30">
            <view class="bg-white px32">
                <u-form :model="form" ref="uForm">
                    <!-- 手机号验证码 -->
                    <template>
                        <u-form-item label="手机号码" label-width="200" prop="mobile">
                            <u-input type="number" disabled v-model="form.mobile" maxlength="11" placeholder="请输入手机号" />
                        </u-form-item>
                        <u-form-item label-position="left" label="验证码" label-width="200" prop="code">
                            <u-input type="number" maxlength="6" placeholder="请输入验证码" v-model="form.code"></u-input>
                            <u-button ripple slot="right" type="primary" size="mini" @click="getCode">{{
                                codeTips
                            }}</u-button>
                        </u-form-item>
                    </template>
                    <!-- 支付密码 -->
                    <template>
                        <u-form-item label="支付密码" label-width="200">
                            <u-input maxlength="6" v-model="form.tradepass" placeholder="请输入支付密码" type="password" />
                        </u-form-item>
                        <u-form-item label="确认密码" label-width="200">
                            <u-input maxlength="6" v-model="form.tquepass" placeholder="再次确认支付密码" type="password" />
                        </u-form-item>
                    </template>
                </u-form>
            </view>
            <div class="mt50 mx30">
                <u-button type="primary" ripple @click="submit">提交</u-button>
            </div>
        </view>
        <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
        <u-toast ref="uToast" />
    </div>
</template>
  
<script>

export default {
    data() {
        return {
            codeTips: '', //倒计时
            codeType: '', //验证码类型
            requestName: '', //请求名
            form: {
                mobile: '',
                tradepass: '',
                tquepass: '',
            },
            rules: {
                mobile: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: ['blur']
                    }
                ],
                code: [
                    {
                        required: true,
                        message: '请输入验证码',
                        trigger: ['blur']
                    }
                ]
            }
        }
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules)
    },
    onLoad(options) {
        this.getUserInfo()
        uni.setNavigationBarTitle({
            title: options.name
        })
    },
    methods: {
        submit() {
            this.$refs.uForm.validate(valid => {
                if (valid) {
                    this.$u.api.set_password(this.form).then(res => {
                        this.$refs.uToast.show({
                            title: res.msg,
                            type: 'success',
                            callback: () => {
                                uni.navigateBack({ delta: 1 })
                            }
                        })
                    })
                } else {
                    console.log('验证失败')
                }
            })
        },
        getCode(e) {
            if (this.$refs.uCode.canGetCode) {
                if (!this.form.mobile) {
                    this.$u.toast('请输入手机号码！')
                    return
                }
                uni.showLoading({ title: '正在获取验证码' })
                setTimeout(() => {
                    this.requestCode(e)
                }, 500)
            } else {
                this.$u.toast('倒计时结束后再发送')
            }
        },
        requestCode(e) {
            const params = {
                mobile: this.form.mobile,
                type: 'trade'
            }
            this.$u.api.send_sms(params).then(res => {
                uni.hideLoading()
                this.$u.toast('验证码已发送')
                this.$refs.uCode.start()
            })
        },
        codeChange(text) {
            this.codeTips = text
        },
        getUserInfo() {
            this.$u.api.material().then(res => {
                this.form.mobile = res.data.data.mobile;
            });
        },
    }
}
</script>
  
<style>
page {
    background-color: white;
}
</style>
  